<template>
  <el-col>
    <el-dialog title="增加" :visible.sync="addDialogVisible" :before-close="handleCloseAddDialog">
      <el-form ref="roleInfo" :model="roleInfo" :rules="rules" label-width="100px">
        <el-form-item label="名字" prop="roleName">
          <el-input v-model="roleInfo.roleName" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseAddDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAddDialog">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="更新" :visible.sync="updateDialogVisible" :before-close="handleCloseUpdateDialog">
      <el-form ref="roleInfo" :model="roleInfo" :rules="rules" label-width="100px">
        <el-form-item label="名字" prop="roleName">
          <el-input v-model="roleInfo.roleName" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseUpdateDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmUpdateDialog">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="路由" :visible.sync="menuDialogVisible" :before-close="handleCloseMenuDialog">
      <menuDialog v-if="menuDialogVisible" :role-id="roleId" />
    </el-dialog>

    <el-dialog title="接口" :visible.sync="interfaceDialogVisible" :before-close="handleCloseInterfaceDialog">
      <interfaceDialog v-if="interfaceDialogVisible" :role-id="roleId" />
    </el-dialog>

    <el-row>
      <el-col :span="2">
        <el-button type="primary" @click="addDialogVisible = true">增加</el-button>
      </el-col>

      <el-col :span="2">
        <el-button :disabled="multipleSelection.length > 1" type="warning"
          @click="showUpdateDialogVisible">更新</el-button>
      </el-col>

      <el-col :span="2">
        <el-button type="danger" @click="handleDeleteSelectIds">删除</el-button>
      </el-col>

      <el-col :span="5">
        <el-input v-model="query" type="text" />
      </el-col>
      <el-col :span="1">
        <el-button @click="doSelectAll"> 搜索 </el-button>
      </el-col>
    </el-row>

    <el-table ref="multipleTable" :data="roleList" style="width: 100%" row-key="roleId" lazy
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="roleId" label="角色 ID" />
      <el-table-column prop="roleName" label="名字" />
      <el-table-column label="权限">
        <template slot-scope="scope">
          <el-button @click="showMenuDialogVisible(scope.row.roleId)">
            路由
          </el-button>
          <el-button @click="showInterfaceDialogVisible(scope.row.roleId)"> 接口 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="total" prev-click="" next-click="" />
  </el-col>
</template>

<script>
import menuDialog from "@/components/Role/Menu";
import interfaceDialog from '@/components/Role/Interface'

export default {
  name: "MRole",
  components: {
    menuDialog,
    interfaceDialog
  },
  data() {
    return {
      addDialogVisible: false,
      updateDialogVisible: false,
      menuDialogVisible: false,
      interfaceDialogVisible: false,

      roleId: 0,

      rules: {
        roleName: [{ required: true, trigger: "blur" }],
      },

      roleInfo: {
        roleName: "",
      },

      roleList: [],
      page: 0,
      pageSize: 10,
      total: 0,

      query: "",

      multipleSelection: [],
    };
  },
  created() {
    this.doSelectAll();
  },
  methods: {
    showUpdateDialogVisible() {
      if (this.multipleSelection.length === 0) {
        this.$message.error("请选择");
        return;
      }
      this.roleInfo = this.multipleSelection[0];
      this.updateDialogVisible = true;
    },
    showMenuDialogVisible(roleId) {
      this.roleId = roleId;
      this.menuDialogVisible = true;
    },
    showInterfaceDialogVisible(roleId) {
      this.roleId = roleId;
      this.interfaceDialogVisible = true;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleCloseAddDialog() {
      this.addDialogVisible = false;
      this.refresh();
    },
    handleConfirmAddDialog() {
      this.$refs.roleInfo.validate((valid) => {
        if (valid) {
          this.addDialogVisible = false;
          this.$store.dispatch("role/addRole", this.roleInfo).then(() => { });
        }
      });
      this.doSelectAll()
      this.refresh();
    },

    handleCloseUpdateDialog() {
      this.updateDialogVisible = false;
      this.refresh();
    },
    handleConfirmUpdateDialog() {
      this.$refs.roleInfo.validate((valid) => {
        if (valid) {
          this.updateDialogVisible = false;
          this.$store.dispatch("role/updateRole", this.roleInfo).then(() => { });
        }
      });
      this.doSelectAll()
      this.refresh();
    },

    handleCloseMenuDialog() {
      this.menuDialogVisible = false;
    },

    handleCloseInterfaceDialog() {
      this.interfaceDialogVisible = false;
    },

    handleDeleteSelectIds() {
      const ids = [];
      for (const obj of this.multipleSelection) {
        ids.push(obj.roleId);
      }
      this.$store.dispatch("role/deleteRole", ids).then(() => { });
      this.doSelectAll()
    },

    refresh() {
      this.roleInfo = {
        roleName: "",
      };
      this.$refs.multipleTable.clearSelection();
    },

    doSelectAll() {
      this.$store
        .dispatch("role/selectAllRole", {
          obj: {
            roleName: this.query,
          },
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.roleList = res.list;
          this.total = res.total;
        });
    },

    prevClick() {
      this.page -= 1;
      this.doSelectAll();
    },
    nextClick() {
      this.page += 1;
      this.doSelectAll();
    },
  },
};
</script>

<style scoped>

</style>
